<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>		
		<view class="page-place-order">
		    <scroll-view :scrollX="false" :scrollY="true">
			<shareOrder ref="shareOrder" @shareInfo="getShareInfo"></shareOrder>
		        <orderBaseInfo 
					:orderType="order_type" 
					:carInfo="car_info" 
					:gainInfo="gain_info" 
					:backInfo="back_info" 
					:startDate="start_date" 
					:endDate="end_date" 
					:rentalDate="rental_date" 
					@dateConfirm="dateConfirm"
				></orderBaseInfo>
				
				<drivers :tenant="tenant" @confirm="confirmDriver" :isSelect="order_type===2?false:true"></drivers>
				
				<!-- 保障服务 -->
				<carInsure ref="CarInsuer" :info="preset_order.info" :increment="preset_order.increment" @insureCall="insureCall"></carInsure>
				
<!-- 				<view class="place-offline-payment">
					<view class="header">
						<text class="title">线下支付</text>
					</view>
					<view class="row">
						<text class="label">车辆押金</text>
						<view class="flex"></view>
						<text class="value">3000元</text>
					</view>
					<view class="row">
						<text class="label">车辆押金</text>
						<view class="flex"></view>
						<text class="value">3000元</text>
					</view>
				</view> -->

				<!-- 优惠券 -->
				<carService v-if="is_coupon" ref="carService" :points="use_points" :p_couponid="coupon_id" :couponfee="coupon_fee" @couponCall="couponCall" :increment_item="increment_item"></carService>
				
				<!-- 积分抵扣 -->
				<points v-if="points_show" :info="total_data" @change="pointsChange"></points>
				
				<!-- #ifdef MP-ALIPAY -->
				<!-- 支付宝免押 -->
				<zfbMianya :yajin="preset_order.info.deposit_fee || 0" @select="setMianya" v-if="preset_order.alipay.service_status==1"></zfbMianya>
				<!-- #endif -->
				
				<!-- 订金 -->
				<dingjin @select="dingjinChange" :money="total_data" v-if="retainer_show"></dingjin>
				
				<!-- 租车规则 -->
				<ruleTabs :list="car_rule" :text="car_rule[0].content" v-if="car_rule.lenght>0"></ruleTabs>
				
				<!-- 协议 -->
				<agreement :title="hetong_title" :content="treaty.treaty_content" :title2="hetong_title2" :content2="treaty.privacy_content" startText="我已同意" endText="条例" @change="agreementChange" @showInfo="showHetong"></agreement>
				<!-- 金额统计 -->
				<placeFooter ref="placeFooter" :total="total_data" :is_retainer="is_retainer" @submit="submit"></placeFooter>
				
		    </scroll-view>
		</view>
		
		<!-- 支付宝订阅消息组件Start -->
		<!-- #ifdef MP-ALIPAY -->
		<subscribe-msg/>
		<!-- #endif -->
		<!-- 支付宝订阅消息组件End -->
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import $pay from '@/common/pay'
	import $notice from "@/common/notice"
	import checkLogin from '@/mixins/loginCheck.js'
	import drivers from "../components/drivers.vue"
	import agreement from "../components/agreement.vue"
	import orderBaseInfo from "../components/orderBaseInfo.vue"
	import carInsure from "../components/carInsure.vue"
	import placeFooter from "../components/placeFooter.vue"
	import ruleTabs from "../components/ruleTabs.vue"
	import carService from "../components/carService.vue"
	import shareOrder from '../components/shareOrder.vue'
	import zfbMianya from '../components/zfb-mianya.vue';
	import dingjin from '../components/dingjin.vue';
	import points from '../components/points.vue';
	export default {
		// mixins:[checkLogin],
		components:{
			drivers,
			agreement,
			orderBaseInfo,
			carInsure,
			placeFooter,
			ruleTabs,
			carService,
			zfbMianya,
			shareOrder,
			dingjin,
			points,
		},
		data() {
			return {
				nav_title:'',
				agreement:false,
				driver_list:[],					//驾驶人列表
				preset_order:{},				//预设订单数据
				car_info:{},
				total_data:{},					//传入统计数据
				is_coupon:false,				//是否开启优惠券
				coupon_id:[-1],					//选择的优惠券
				coupon_fee:0,					//优惠的金额
				increment_item:[],				//增值服务
				rental_date:{},					//租车时间
				hetong_title:'',
				hetong_title2:'',
				tenant: {						//选中驾驶人信息
					id: 0,
					realname: "",
					mobile: "",
					is_default:0,
				},
				car_rule:[],
				treaty:{},						//协议内容
				order_relet:0,					//续租旧订单ID
				order_type:1,					//订单类型
				is_mianya:0,					//是否支付宝免押
				share_data:{
					title:'',
					imageUrl:'',
					path:'/pages/flow/create/share?id=',
				},
				is_retainer:0,						//是否选择订金  1=订金   0=全款
				retainer_show:false,				//是否显示订金选择
				use_points:0,						//是否使用积分
				points_show:false,					//是否显示积分选择
			}
		},
		onLoad(option){
			//续租订单界面
			if(option.order_id!=undefined){
				this.order_relet=option.order_id
				this.order_type=2
				this.nav_title="续租订单"
			}
			if(this.carid===0){
				this.$c.error('请先选择车辆','car/list/index')
				return false
			}
			this.initData()
		},
		onShow(){
			
		},
		// 分享页面信息
		onShareAppMessage(res) {
			if(res.from=='button'){
				this.$refs.shareOrder.show=false;
				return this.share_data;
			}
		},
		computed:{
			...mapState({
				gain_info:state => state.$gainInfo,
				back_info:state => state.$backInfo,
				start_date:state => state.$startDate,
				end_date:state => state.$endDate,
				carid:state => state.$carID,
				is_drive:state => state.$isDrive
			})
		},
		methods: {
			initData(){
				// 修改标题
				if(this.is_drive){
					this.nav_title="代驾下单"
				}else{
					this.nav_title="租车下单"
				}
				
				//设置初始化数据
				this.setOrderData()
				
				//合同配置
				this.getHetong()
				
				//获取汽车信息参数
				this.$u.api.carInfo({car_id:this.carid}).then(res=>{
					this.car_info=res.data.info
				})
				
				// 是否开启优惠券
				if(this.$config.plugin.coupon===1){
					this.is_coupon=true
				}				
			},
			// 设置初始化数据
			setOrderData(){
				let post={
					car_id:this.carid,
					start_date:this.start_date.timestamp,
					end_date:this.end_date.timestamp,
					gain_type:this.gain_info.type,
					gain_address:this.gain_info.address,
					gain_lat:this.gain_info.lat,
					gain_lng:this.gain_info.lng,
					gain_store:this.gain_info.store,
					back_type:this.back_info.type,
					back_address:this.back_info.address,
					back_lat:this.back_info.lat,
					back_lng:this.back_info.lng,
					back_store:this.back_info.store,
					order_id:this.order_relet,
					order_type:this.order_type,
					is_drive:this.is_drive,
				}
				
				//预下单参数
				this.$u.api.carOrder(post).then(res=>{
					this.preset_order=res.data					
					this.car_rule=res.data.rule_list.list
					this.rental_date=res.data.day_num
					this.total=res.data.realmoney
					
					//设置默认驾驶人				
					this.tenant={
						id: res.data.tenant.id || 0,
						realname: res.data.tenant.realname || '',
						mobile: res.data.tenant.mobile || '',
						is_default:res.data.tenant.is_default || 0,
					}
				
					// 设置默认价格，和优惠价格，默认优惠券ID
					this.total_data=res.data
					this.coupon_id=[res.data.coupon_id]
					this.coupon_fee=res.data.coupon_fee
					
					//如果线上押金默认勾选，则初始化数值
					if(this.$config.base.deposit_type==="1"){
						this.increment_item=this.$refs.CarInsuer.calculateIncrement(this.preset_order.increment,true)
					}else{
						this.increment_item=this.$refs.CarInsuer.calculateIncrement(this.preset_order.increment,false)
					}
					
					//判断是否支持并显示订金选择
					this.retainer_show=res.data.retainer_status===1?true:false
					//判断是否支持积分抵扣 或者没有积分就隐藏
					if(res.data.points_status==0 || res.data.use_points==0){
						this.points_show=false
					}else{
						this.use_points=res.data.use_points;		//赋值积分参数
						this.points_show=true;
					}
					
					this.$refs.placeFooter.submitButton(true)
				}).catch(error=>{
					this.$refs.placeFooter.submitButton(false)
				})
			},
			//增值服务回调
			insureCall(increment){
				this.increment_item=increment
				this.calTotal()
			},
			//优惠券回调
			couponCall(id){
				this.coupon_id=id
				this.calTotal()
			},
			//更新总金额
			calTotal(){
				let post = this.postOrderData();
				
				//统计金额
				this.$u.api.calMoney(post).then(res=>{
					this.total_data=res.data
					this.coupon_fee=res.data.coupon_fee
					this.increment_item=post.increment_item
					this.use_points=res.data.use_points
				})
			},
			//返回我同意的合同的状态
			agreementChange(e){
				this.agreement=e
			},
			//确定驾驶人信息
			confirmDriver(item,index){
				this.tenant=item
			},
			//提交订单前是否条件都通过
			isVerify(){
				if(!this.agreement){
					this.$c.info('请先勾选协议')
					return false
				}
				
				if(this.tenant.id==0){
					this.$c.info('请先选择驾驶人')
					return false
				}
				
				return true
			},
			//提交订单
			submit(){
				if(this.isVerify()){					
					// #ifdef MP-WEIXIN
					$notice.wxNotice(this.$config.wxapp.tpl_id).then(res=>{
						this.createOrder()
					})
					// #endif
					
					// #ifdef MP-ALIPAY
					$notice.alipayNotice(this.$config.aliapp.tpl_id).then(res=>{
						this.createOrder()
					})
					// #endif
				}				
			},
			//获取创建订单POST所需的参数
			postOrderData(){
				let data={
					start_date:this.start_date.timestamp,
					end_date:this.end_date.timestamp,
					car_id:this.carid,
					tenant_id:this.tenant.id,
					increment_item:this.increment_item,
					coupon_id:this.coupon_id.join(','),
					gain_type:this.gain_info.type,
					gain_address:this.gain_info.address,
					gain_lat:this.gain_info.lat,
					gain_lng:this.gain_info.lng,
					gain_store:this.gain_info.store,
					back_type:this.back_info.type,
					back_address:this.back_info.address,
					back_lat:this.back_info.lat,
					back_lng:this.back_info.lng,
					back_store:this.back_info.store,
					order_id:this.order_relet,
					order_type:this.order_type,
					is_mianya:this.is_mianya,
					is_drive:this.is_drive,
					is_retainer:this.is_retainer,
					use_points:this.use_points,
				}
				return data
			},
			//创建订单
			createOrder(){
				//是否需要支付宝发起预授权
				if(this.is_mianya===1 && this.$config.alipay.service_status!=1){
					this.$c.info('请先开启后台的免押功能')
					this.$refs.placeFooter.submitButton(true)
					return false;
				}
				
				//防止重复提交
				this.$refs.placeFooter.submitButton(false)
				
				this.$u.api.orderCreate(this.postOrderData()).then(res=>{
					if(res.status){
						if(this.is_mianya===1){			//如果免押出发支付宝支付
							this.alipay(res.data)
						}else{
							this.$store.commit('clearRental')
							this.$c.a("flow/"+res.data.url+"/index",{id:res.data.order_id},4)
						}
					}
				}).catch(error=>{
					this.$refs.placeFooter.submitButton(true)
				})
			},
			
			// #ifdef MP-ALIPAY
			//支付宝支付
			alipay(data){
				let than=this
				let order_id=data.id;
				$pay.aliAuthPay(data.pay).then(result=>{
					if(result.status){
						//回调通知免押
						uni.$u.api.backMianya({id:order_id}).then(myres=>{
							//清空数据
							than.$store.commit('clearRental')
							than.$c.success('免押成功！',"pages/flow/"+myres.data.url+"/index?id="+order_id,4)
						}).catch(error=>{
							than.mianyaError(error,order_id)
						})
					}else{
						than.mianyaError(result.tips,order_id)
					}
				}).catch(error=>{
					than.mianyaError(error,order_id)
				})
			},
			//设置免押处理
			setMianya(e){
				this.is_mianya=e;
				this.calTotal();
			},
			
			// 免押失败处理
			mianyaError(tips,orderid){
				this.$store.commit('clearRental')
				this.$c.error(tips,'order/detail/index?id='+orderid,4)
			},
			// #endif
			
			// 修改日期后更新价格
			dateConfirm(){
				this.setOrderData()
			},
			//获取分享时
			getShareInfo(data){
				this.share_data=data;
			},
			// 获取合同配置
			getHetong(){
				if(this.is_drive==1){			//显示代驾合同参数
					this.hetong_title=this.$config.treaty.drive_title;
					this.hetong_title2=this.$config.treaty.privacy_title;
					
					//获取协议配置
					this.$u.api.configContent({field:'treaty.drive_content,treaty.privacy_content'}).then(res=>{
						this.treaty=res.data.treaty
					})
				}else{
					this.hetong_title=this.$config.treaty.treaty_title ?? '租车汽车租赁合同';
					this.hetong_title2=this.$config.treaty.privacy_title ?? '隐私说明';
					
					//获取协议配置
					this.$u.api.configContent({field:'treaty.treaty_content,treaty.privacy_content'}).then(res=>{
						this.treaty=res.data.treaty
					})
				}
			},
			// 修改付款方式
			dingjinChange(e){
				this.is_retainer=e
			},
			// 积分抵扣发生修改
			pointsChange(e){
				this.use_points=e
				this.calTotal();
			}
		}
	}
</script>

<style lang="scss">
	.page-place-order {
	    padding-top: 30rpx;
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
		background-color: #ECEFF2;
	}
	
	/*线下支付*/
	.place-offline-payment {
	    display: block;
	    margin: 0 32rpx 32rpx;
	    padding: 32rpx;
	    background: #fff;
	    border-radius: 20rpx;
	}
	
	.place-offline-payment .header {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    background-size: 30rpx auto;
		margin-bottom: 32rpx;
	}
	
	.place-offline-payment .header .title {
	    display: block;
	    font-weight: 700;
	    font-size: 30rpx;
	}
	
	.place-offline-payment .row {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    padding-bottom: 18rpx;
	}
	
	.place-offline-payment .row .label {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-offline-payment .row .value {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-offline-payment .row .flex {
	    display: block;
	    flex: 1;
	    width: 100%;
	}
	
</style>
